<html>

    <h1>待办事项清单</h1>
    <input id="todotitle"  type="text" placeholder="添加新事项">
    <button onclick="zenjia()">+</button>

    <ul id=listBox></ul>
</html>
<script>

//展示
    fetch("/todos")
    .then(function(response){
        return response.json()
    })
    .then(function(data){

        var arr = data.todos;

    document.getElementById("listBox").innerHTML=""
    for (var i =0;i<arr.length;i++){
        var a=arr[i]
        var opt='<li>'+arr[i].id + '<span>'+arr[i].title+'</span></li>'
        document.getElementById('listBox').innerHTML += opt
    }
 })
//增加
     function zenjia(){
        var title=document.getElementById('todotitle').value;
        var url = '/todos';
        var headers = {
        "Content-Type": "application/x-www-form-urlencoded"
        }
    fetch(url,{
        method:'POST',
        body:'title='+title,
        headers:headers
    })
    .then(res => res.json())
    .then(function(data){
        console.log(data)
        console.log('title' in data);
        if('title' in data){
            document.getElementById("todotitle").value='';
            todolist();}
    })

}
//删除

</script>